<template>
	<view class="container">
		<!-- 预约类型 -->
		<view class="card mb-20">
			<view class="grid grid-col-3 text-center">
				<view class="grid-item p-20" :class="{active: activeType === index}" v-for="(item, index) in typeList" :key="index" @click="switchType(index)">
					<text class="iconfont" :class="item.icon" style="font-size: 50rpx;"></text>
					<text class="block mt-10">{{ item.name }}</text>
				</view>
			</view>
		</view>
		
		<!-- 预约项目 -->
		<view class="reservation-list">
			<view class="card mb-20" v-for="(item, index) in reservationList" :key="index">
				<view class="flex">
					<image :src="item.image" mode="aspectFill" style="width: 150rpx; height: 150rpx; border-radius: 10rpx;"></image>
					<view style="flex: 1; margin-left: 20rpx;">
						<text class="block" style="font-weight: bold;">{{ item.title }}</text>
						<text class="block text-gray mt-10">{{ item.desc }}</text>
						<view class="flex justify-between mt-20">
							<text class="text-gray">剩余: {{ item.remaining }}</text>
							<text class="button" style="padding: 10rpx 20rpx; font-size: 24rpx;" @click="makeReservation(item)">立即预约</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 预约弹窗 -->
		<view class="popup" v-if="showPopup">
			<view class="popup-mask" @click="closePopup"></view>
			<view class="popup-content card">
				<view class="text-center mb-20" style="font-weight: bold; font-size: 36rpx;">预约信息</view>
				<view class="form-item mb-20">
					<text>预约项目:</text>
					<text style="margin-left: 20rpx;">{{ currentReservation.title }}</text>
				</view>
				<view class="form-item mb-20">
					<text>预约时间:</text>
					<picker mode="date" :value="reservationDate" @change="dateChange">
						<view class="picker">
							{{ reservationDate }}
						</view>
					</picker>
				</view>
				<view class="form-item mb-20">
					<text>预约人数:</text>
					<view class="number-selector flex align-center">
						<text class="iconfont icon-reduce" @click="changeNumber(-1)"></text>
						<input type="number" v-model="reservationNumber" style="width: 80rpx; text-align: center;" />
						<text class="iconfont icon-add" @click="changeNumber(1)"></text>
					</view>
				</view>
				<view class="form-item mb-20">
					<text>联系电话:</text>
					<input type="number" v-model="contactPhone" placeholder="请输入联系电话" style="flex: 1; margin-left: 20rpx;" />
				</view>
				<view class="button" @click="confirmReservation">确认预约</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeType: 0,
				typeList: [
					{ name: '景点', icon: 'icon-scenic' },
					{ name: '演出', icon: 'icon-show' },
					{ name: '导览', icon: 'icon-guide' }
				],
				reservationList: [
					{
						id: 1,
						title: '故宫博物院导览服务',
						desc: '专业讲解员带您深入了解紫禁城的历史文化',
						remaining: 20,
						image: '/static/gugong.jpg'
					},
					{
						id: 2,
						title: '颐和园游船预约',
						desc: '乘坐龙舟游览昆明湖，体验皇家园林之美',
						remaining: 15,
						image: '/static/yiheyuan.jpg'
					},
					{
						id: 3,
						title: '国家大剧院演出',
						desc: '经典话剧《茶馆》演出票预约',
						remaining: 50,
						image: '/static/theater.jpg'
					}
				],
				showPopup: false,
				currentReservation: {},
				reservationDate: '2023-06-15',
				reservationNumber: 1,
				contactPhone: ''
			}
		},
		methods: {
			switchType(index) {
				this.activeType = index;
			},
			makeReservation(item) {
				this.currentReservation = item;
				this.showPopup = true;
			},
			closePopup() {
				this.showPopup = false;
			},
			dateChange(e) {
				this.reservationDate = e.target.value;
			},
			changeNumber(num) {
				if (this.reservationNumber + num > 0) {
					this.reservationNumber += num;
				}
			},
			confirmReservation() {
				if (!this.contactPhone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					})
					return;
				}
				
				uni.showModal({
					title: '预约成功',
					content: `您已成功预约${this.currentReservation.title}，预约时间：${this.reservationDate}，人数：${this.reservationNumber}人`,
					showCancel: false,
					success: () => {
						this.showPopup = false;
					}
				})
			}
		}
	}
</script>

<style>
	.grid {
		display: flex;
		flex-wrap: wrap;
	}
	
	.grid-col-3 .grid-item {
		width: 33.33%;
		box-sizing: border-box;
	}
	
	.grid-item.active {
		color: #007AFF;
	}
	
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}
	
	.popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}
	
	.popup-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
	}
	
	.form-item {
		display: flex;
		align-items: center;
	}
	
	.number-selector .iconfont {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1rpx solid #eee;
		border-radius: 50%;
	}
	
	.picker {
		padding: 10rpx 20rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		margin-left: 20rpx;
	}
</style>